<script setup lang="ts">
import { ref } from "vue";
import { onClickOutside } from "@vueuse/core";
import { fetchGoodSkuAPI } from "@/api/shopCartApi/shopCartApi.ts";
import Sku from "@/views/detail/components/sku/sku.vue";
import type { selectSku, Sku as SkuType, Spec } from "@/types/detailTypes/detailTypes.ts";
import Button from "@/components/lib/Button.vue";


interface Props {
   attrText: string;
   skuId: string;
}

interface Emits {
   (e: "change", sku: selectSku): void;
}


const props = defineProps<Props>();

const emits=defineEmits<Emits>()

const target = ref();

const visable = ref<boolean>(false);

const loading = ref<boolean>(false);

const specs = ref<Spec[]>([]);

const skus = ref<SkuType[]>([]);

const skuInfo = ref<selectSku>({} as selectSku);

const open = async () => {
   visable.value = true;
   loading.value = true;
   const { result } = await fetchGoodSkuAPI(props.skuId);
   skus.value = result.skus;
   specs.value = result.specs;
   loading.value = false;
};

const close = () => {
   visable.value = false;
};

const toggle = () => {
   visable.value ? close() : open();
};


const getSkuInfo = (sku: selectSku) => {
   skuInfo.value = sku;
};


const updateSku = () => {
   if (skuInfo.value.skuId && skuInfo.value.skuId !== props.skuId) {
      emits("change",skuInfo.value)
      close()
   }
};

onClickOutside(target, close);

</script>

<template>
   <div class="cart-sku" ref="target">
      <div class="attrs" @click="toggle">
         <span class="ellipsis">{{ attrText }}</span>
         <i class="iconfont icon-angle-down"></i>
      </div>
      <div class="layer" v-if="visable">
         <div class="loading" v-if="loading"></div>
         <sku :specs="specs" :skus="skus" @change="getSkuInfo" v-else></sku>
         <Button type="primary" size="small" v-if="!loading" @click="updateSku">确定</Button>
      </div>
   </div>
</template>

<style scoped lang="less">
.cart-sku {
   cursor: pointer;
   height: 28px;
   border: 1px solid #f5f5f5;
   padding: 0 6px;
   position: relative;
   margin-top: 10px;
   display: inline-block;

   .attrs {
      line-height: 24px;
      display: flex;

      span {
         max-width: 230px;
         font-size: 14px;
         color: #999;
      }

      i {
         margin-left: 5px;
         font-size: 14px;
      }
   }

   .layer {
      position: absolute;
      left: -1px;
      top: 40px;
      z-index: 10;
      width: 400px;
      border: 1px solid @xtxColor;
      box-shadow: 2px 2px 4px lighten(@xtxColor, 50%);
      background: #fff;
      border-radius: 4px;
      font-size: 14px;
      padding: 20px;

      &::before {
         content: "";
         width: 12px;
         height: 12px;
         border-left: 1px solid @xtxColor;
         border-top: 1px solid @xtxColor;
         position: absolute;
         left: 12px;
         top: -8px;
         background: #fff;
         transform: scale(.8, 1) rotate(45deg);
      }

      .loading {
         height: 224px;
         background: url(../../../../assets/images/loading.gif) no-repeat center;
      }
   }
}
</style>
